<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{ dpShop.shopName }}数据汇总</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="close"
                >关闭
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         label-position="left" size="small">
                    <el-row>
                        <el-col>
                            <el-form-item label="请选择日期">
                                <el-date-picker
                                    v-model="dateRange"
                                    value-format="yyyy-MM-dd"
                                    unlink-panels
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="this.CONST.analysis_date_options">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-on:click="query">确定</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div id="tableArea">
                <el-table
                    id="mainTable"
                    v-fixed-header="{startFixed: 0}"
                    :data="tableData"
                    border
                    header-cell-class-name="tableHeaderStyle"
                    size="small">
                    <el-table-column prop="index" label="序号" type="index" fixed></el-table-column>
                    <el-table-column prop="dateStr" label="时间" width="140" fixed align="center"></el-table-column>
                    <el-table-column label="基本数据" align="center">
                        <el-table-column prop="h.mainScore" label="大分"></el-table-column>
                        <el-table-column prop="h.tasteScore" label="口味分"></el-table-column>
                        <el-table-column prop="h.envScore" label="环境分"></el-table-column>
                        <el-table-column prop="h.serviceScore" label="服务分"></el-table-column>
                        <el-table-column prop="h.mainScore" label="食材分"></el-table-column>
                        <el-table-column prop="h.rankNameNull" label="榜单"></el-table-column>
                        <el-table-column prop="h.reserveCount" label="预定数量"></el-table-column>
                        <el-table-column prop="h.reviewCount" label="评论数量"></el-table-column>
                        <el-table-column prop="h.favorNum" label="收藏数量"></el-table-column>
                    </el-table-column>
                    <el-table-column label="运营数据" align="center">
                        <el-table-column prop="d.viewUv" label="自然曝光"></el-table-column>
                        <el-table-column prop="d.visitUv" label="自然访客"></el-table-column>
                        <el-table-column prop="d.visitRate" label="转化率"></el-table-column>
                    </el-table-column>
                    <el-table-column label="浏览量" align="center">
                        <el-table-column prop="p.allCount" label="总共"></el-table-column>
                        <el-table-column prop="p.appCount" label="APP"></el-table-column>
                        <el-table-column prop="p.adCount" label="广告"></el-table-column>
                        <el-table-column prop="p.natureCount" label="自然"></el-table-column>
                        <el-table-column prop="p.othersCount" label="其它渠道"></el-table-column>
                        <el-table-column prop="p.peerDesc" label="同行"></el-table-column>
                        <el-table-column prop="p.peerRank" label="同行排名"></el-table-column>
                        <el-table-column prop="p.peerTop10AppAvgCount" label="前10均值"></el-table-column>
                        <el-table-column prop="p.peerTop50AppAvgCount" label="前50均值"></el-table-column>
                        <el-table-column
                            prop="peerTop10"
                            label="同行前10">
                            <template v-slot="scope">
                                <table-popover :text=scope.row.p.peerTop10
                                               :length="24"
                                               v-if="scope.row.p.peerTop10"
                                               placeholder="点击查看">
                                </table-popover>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="团代销量" align="center">
                        <el-table-column prop="s.allAmt" label="总金额"></el-table-column>
                        <el-table-column prop="s.allCount" label="总单数"></el-table-column>
                        <el-table-column prop="s.dpAmt" label="点评金额"></el-table-column>
                        <el-table-column prop="s.mtAmt" label="美团金额"></el-table-column>
                        <el-table-column prop="s.tuanAmt" label="团购金额"></el-table-column>
                        <el-table-column prop="s.voucherAmt" label="代金券金额" width="90"></el-table-column>
                    </el-table-column>
                    <el-table-column label="收入" align="center">
                        <el-table-column prop="r.actualAmt" label="实收金额"></el-table-column>
                        <el-table-column prop="r.orderCount" label="订单数"></el-table-column>
                        <el-table-column prop="r.groupAmt" label="团购收单"></el-table-column>
                        <el-table-column prop="r.mtAmt" label="美团收单"></el-table-column>
                        <el-table-column prop="r.buyAmt" label="APP买单"></el-table-column>
                    </el-table-column>
                    <el-table-column label="评价" align="center">
                        <el-table-column prop="r.newDpCount" label="点评评价"></el-table-column>
                        <el-table-column prop="r.newMtCount" label="美团评价"></el-table-column>
                    </el-table-column>
                    <el-table-column label="推广通" align="center">
                        <el-table-column prop="c.t30001" label="花费"></el-table-column>
                        <el-table-column prop="c.t30002" label="曝光"></el-table-column>
                        <el-table-column prop="c.u10cpm" label="千次曝光成本" width="100"></el-table-column>
                        <el-table-column prop="c.t30003" label="点击"></el-table-column>
                        <el-table-column prop="c.t30004" label="点击均价"></el-table-column>
                        <el-table-column prop="c.u10001" label="点击率"></el-table-column>
                        <el-table-column prop="c.t30005" label="浏览量"></el-table-column>
                        <el-table-column prop="c.u10002" label="浏览率"></el-table-column>
                        <el-table-column prop="c.t30026" label="感兴趣量"></el-table-column>
                        <el-table-column prop="c.u10003" label="感兴趣率"></el-table-column>
                        <el-table-column prop="c.t30020" label="团单量"></el-table-column>
                        <el-table-column prop="c.u10004" label="单笔团单成本" width="100"></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import {getDpShopByShopId, getDpShopDataSummary} from "@/api/api";
import TablePopover from "@/component/single/TablePopover";

export default {
    name: "DpShopSummary",
    components: {TablePopover},
    data() {
        return {
            dpShop: {},
            shopId: '',
            startDate: '',
            endDate: '',
            // 时间范围
            dateRange: [],

            // 表头
            header: [],
            // 数据
            tableData: [],

            elTableHeight: 0,
        }
    },
    watch: {
        $route: function (newVal, oldVal) {
            this.shopId = newVal.query.shopId;
            this.startDate = newVal.query.startDate;
            this.endDate = newVal.query.endDate;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        }
    },
    methods: {
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', this.dpShop.shopName + this.startDate + '到' + this.endDate + '数据汇总.xlsx');
        },
        // 查询
        query: function () {
            let ss = this.dateRange[0];
            let ee = this.dateRange[1];
            if (ss === this.startDate && ee === this.endDate) {
                this.getData();
            } else {
                this.startDate = this.dateRange[0];
                this.endDate = this.dateRange[1];
                let params = {
                    "shopId": this.shopId,
                    "startDate": this.startDate,
                    "endDate": this.endDate,
                }
                this.$router.push({query: params});
            }
        },
        // 获取企业数据
        getData: function () {
            this.startDate = this.dateRange[0];
            this.endDate = this.dateRange[1];
            let params = {
                "shopId": this.shopId,
                "startDate": this.startDate,
                "endDate": this.endDate,
            }
            getDpShopDataSummary(params).then(data => {
                this.tableData = data.body;
            })
            getDpShopByShopId({"shopId": this.shopId}).then(data => {
                this.dpShop = data.body;
                document.title = this.dpShop.shopName + '数据汇总';
            })
        },
        close() {
            window.open('', '_self');
            window.close();
        },
    },
    created() {
        this.shopId = this.$route.query.shopId;
        this.startDate = this.$route.query.startDate;
        this.endDate = this.$route.query.endDate;
        this.dateRange = [this.startDate, this.endDate]
        this.getData();
    },
}
</script>

<style scoped>

</style>
